<template>
  <el-card class="box-card" style="margin-top: 10px">
    <div id="main" ref="main" style="width: 800px; height: 400px"></div>
  </el-card>
</template>

<script>
//引入
import { report } from "@/request/api.js";
import * as echarts from "echarts";
export default {
  data() { 
    return {
      //地区
      // series: [],
    };
  },
  methods: {},
  created() {
    report().then((res) => {
      console.log(res);
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      var option = {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        legend: {
          data: res.data.data.legend.data,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: res.data.data.xAxis[0].data,
          },
        ],
        
        yAxis: [
          {
            type: res.data.data.yAxis[0].type,
          },
        ],
        series: [
          {
            name: "华东",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [2999, 3111, 4100, 3565, 3528, 6000],
          },
          {
            name: "华南",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [5090, 2500, 3400, 6000, 6400, 7800],
          },
          {
            name: "华北",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [6888, 4000, 8010, 12321, 13928, 12984],
          },
          {
            name: "西部",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [9991, 4130, 7777, 12903, 13098, 14028],
          },
          {
            name: "其他",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [15212, 5800, 10241, 14821, 15982, 14091],
          },
        ],
      };

      option && myChart.setOption(option);
    });
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
#main {
  margin-top: 100px;
}
</style>
